<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子换行</title>
    <style>
     .box {
         display: flex;
         flex-wrap:wrap;
         justify-content: space-between;
         height: 300px;
         border: 1px solid #000;
     }
     .box div{
         width: 200px;
         height: 100px;
         background-color: pink;
     }
    </style>
</head>
<body>
  <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
  </div>
</body>
</html>
